<template>
	<view class="modular">
		<view class="headerBox">
			<view class="header">
				<view class="information">
					<view>
						<view><text>会员</text>：{{userInforDetail.realName}} </view>
						<view><text>填写日期</text>：{{userInforDetail && userInforDetail.updateTime}}</view>
					</view>
					<view>
						<view><text>性别</text>：{{userInforDetail && userInforDetail.sex == 1 ? '男' : '女'}} </view>
						<view><text>年龄</text>：{{userInforDetail && userInforDetail.age}}</view>
					</view>
					<view>
						<view><text>评估人</text>：{{userInforDetail && userInforDetail.healthName}}</view>
						<view><text>评估日期</text>：</view>
					</view>
				</view>
			</view>
			
			<view class="connectBox" v-show="!searchBarFixed">
				<image src="@/static/img/healthStatus/connect@2x.png"></image>
				<image src="@/static/img/healthStatus/connect@2x.png"></image>
			</view>
		</view>
		<view class="mainContent">
			<view class="specific">
				<image src="@/static/img/quickly/information/information@2x.png" class="title"></image>
				<view class="boxTwo">
					<view class="item">
						<text>身份证号</text>
						<view>{{userInforDetail.idCard  || '未填写'}}</view>
					</view>
					<view class="item">
						<text>姓名</text>
						<view>{{userInforDetail.realName  || '未填写'}}</view>
					</view>
					<view class="item">
						<text>性别</text>
						<view>{{userInforDetail.sex == 1 ? '男' : userInforDetail.sex == 2 ? '女' : '未知'}}</view>
					</view>
					<view class="item">
						<text>出生日期</text>
						<view>{{userInforDetail.birthday || '未填写'}}</view>
					</view>
					<view class="item">
						<text>年龄</text>
						<view>{{userInforDetail.age  || '未填写'}}</view>
					</view>
					<view class="item">
						<text>手机号</text>
						<view>{{userInforDetail.phone  || '未填写'}}</view>
					</view>
				</view>
			</view>
			<view class="specific">
				<image src="@/static/img/quickly/information/otherInformation@2x.png" class="title"></image>
				<view class="boxTwo">
					<view class="item">
						<text>民族</text>
						<view>{{userInforDetail.nation || '未填写'}}</view>
					</view>
					<view class="item">
						<text>工作单位</text>
						<view>{{userInforDetail.employer || '未填写'}}</view>
					</view>
					<view class="item">
						<text>紧急联系人</text>
						<view>{{userInforDetail.emergencyContactName || '未填写'}}</view>
					</view>
					<view class="item">
						<text>紧急联系人电话</text>
						<view>{{userInforDetail.emergencyContactPhone || '未填写'}}</view>
					</view>
					<view class="item">
						<text>血型</text>
						<view>{{userInforDetail.bloodGroup || '未填写'}}</view>
					</view>
					<view class="item">
						<text>文化程度</text>
						<view>{{userInforDetail.educationLevel || '未填写'}}</view>
					</view>
					<view class="item">
						<text>职业</text>
						<view>{{userInforDetail.occupation || '未填写'}}</view>
					</view>
					<view class="item">
						<text>婚姻状况</text>
						<view>{{userInforDetail.maritalStatus || '未填写'}}</view>
					</view>
					<view class="item">
						<text>医疗费用支付</text>
						<view>{{userInforDetail.medicalExpensesType || '未填写'}}</view>
					</view>
				</view>
			</view>
			<view class="specific">
				<image src="@/static/img/quickly/information/healthInformation@2x.png" class="title"></image>
				<view class="boxTwo">
					<view class="item">
						<text>药物过敏史</text>
						<view v-if="userInforDetail.drugAllergy">
							<text  v-for="(item,index) in userInforDetail.drugAllergy":key="index">{{item}}</text>
						</view>
						<view v-else>
							<text>无</text>
						</view>
					</view>
					<view class="item">
						<text>暴露史</text>
						<view v-if="userInforDetail.exposureHistory">
							<text  v-for="(item,index) in userInforDetail.exposureHistory":key="index">{{item}}</text>
						</view>
						<view v-else>
							<text>无</text>
						</view>
					</view>
					<view>
						<view class="item" v-for="(item,index) in userInforDetail.pastHistory && JSON.parse(userInforDetail.pastHistory)" :key="'a'+index" style="display: unset;">
							<text>{{item.name}}</text>
							<div>
								<view v-for="(a,ai) in item.parameterValueRes && item.parameterValueRes" :key="ai" style="display: flex;">
									<view style="text-indent: 1em;">{{a.name}}</view>
									<view>{{a.value}}</view>
								</view>
							</div>
						</view>
					</view>
				</view>
			</view>
			<view class="specific">
				<image src="@/static/img/quickly/information/familyHistory@2x.png" class="title"></image>
				<view class="boxTwo">
					<view class="item" v-for="(item,aindex) in userInforDetail && userInforDetail.familyHistory && JSON.parse(userInforDetail.familyHistory)" :key="aindex">
						<text>{{item.name}}</text>
						<view>
							<text>{{(item.parameterValueRes && item.parameterValueRes.map((a)=>{return a.value}).join(',') || '无')}}</text>
						</view>
					</view>
					<view class="item">
						<text>遗传病史</text>
						<view>
							<text>{{userInforDetail.geneticDisease || '无'}}</text>
						</view>
					</view>
					<view class="item">
						<text>残疾情况</text>
						<view v-if="userInforDetail.disability">
							<text v-for="(item,index) in userInforDetail.disability":key="index">{{item.substr(0,item.length - 1)}}</text>
						</view>
						<view v-else>
							<text>无</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {getUrlParam,filterData2,distance } from '@/static/js/filter.js';
		export default {
			data() {
				return {
					userInforDetail: {},
					searchBarFixed: false,
				}
			},
			methods: {
				filterData2,
				distance
			},
			onPageScroll() {
				this.searchBarFixed = this.distance('mainContent');
			},
			created() {
				const id = getUrlParam('id');
				if(id) {
					this.$api.findByUserInfo(id).then((res) => {
						if(res.data.returnCode == '200') {
							this.userInforDetail = res.data.result;
							this.userInforDetail.updateTime = res.data.result.updateTime
							this.userInforDetail.disability = res.data.result.disability && res.data.result.disability.split(',').map((a)=>{return a+','});
						}
					})
				}
			}
		}
</script>

<style lang="scss" scoped>
	.modular {
		width: 750upx;
		min-height: calc(100vh - 44px);
		background-color: #F8F8F8;
		position: relative;
		.headerBox {
			position: fixed;
			top: 88upx;
			left: 0;
			width: 100%;
			z-index: 10;
		}
		.header {
			width: 100%;
			background: #05C6AD;
			padding: 38upx 0;
			box-sizing: border-box;
			.information {
				width: 702upx;
				height: 192upx;
				background: #FFFFFF;
				margin: 0 auto;
				border-radius: 20upx;
				padding:20upx 32upx;
				box-sizing: border-box;
				overflow: hidden;
				view {
					display: flex;
					align-items: center;
					line-height: 48upx;
					color: #333333;
					font-size: 30upx;
					view{
						flex: 1;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						display: flex;
						text{
							display: block;
							width: 120upx;
							text-align: justify;
							text-align-last: justify; 
						}
					}
				}
			}
		}
		.connectBox {
			width: 100%;
			position: absolute;
			transform: translateY(-50%);
			left: 0;
			display: flex;
			justify-content: space-between;
			margin-top: 10upx;
			image:nth-child(1) {
				width: 22upx;
				height: 64upx;
				margin-left: 80upx;
			}
			image:nth-child(2) {
				width: 22upx;
				height: 64upx;
				margin-right: 80upx;
			}
		}
		.mainContent,
		.questionDetail{
			width: 702upx;
			margin: 270upx auto 0;
			height: 100%;
			padding-top:18upx;
			.specific {
				.limit {
					width: 100%;
					height: 58upx;
					background: #F6FFFE;
					border-radius: 29upx;
					color: #05C6AD;
					font-size: 28upx;
					line-height: 58upx;
					text-align: center;
					margin-top: 40upx;
				}
				background-color: #FFFFFF;
				width: 100%;
				border-radius: 22upx;
				padding: 34upx 30upx;
				box-sizing: border-box;
				position: relative;
				margin-bottom: 24upx;
				.title {
					width: 298upx;
					height: 36upx;
					margin-bottom: 12upx;
					display: table;
					margin: 0 auto;
				}
				.single {
					display: flex;
					padding: 36upx 0 32upx;
					border-bottom: 1upx dashed #E6E6E6;
					image {
						width: 24upx;
						height: 24upx;
						margin:6upx 13upx 0 0;
					}
					view {
						flex: 1;
						color: #333333;
						font-size: 30upx;
						line-height: 40upx;
						.answer {
							color: #000000;
							font-weight: bold;
							margin-top: 10upx;
						}
					}
				}
				.single:last-child {
					border-bottom: none;
				}
			}
			
		}
		.questionDetail {
			margin: 24upx auto 0;
		}
	}
	.boxTwo {
		height: 100%;
		background: #FFFFFF;
		border-radius: 24upx;
		padding: 44upx 0 0;
		.item {
			display: flex;
			line-height: 62upx;
			color: #333333;
			font-size: 30upx;
			text{
				width: 280upx;
			}
			view {
				flex: 2;
			}
		}
	}
</style>
